<template>
    <div class="dashboard-container">
        <!-- 上部区域：标题 -->
        <div class="top-panel">
            <el-row :gutter="0" style="height: 80%;">
                <!-- 左边：1/5 -->
                <el-col :span="4">
                    <h3>咨询数据看板</h3>
                </el-col>
            </el-row>
        </div>
        <!-- 下部区域：网格布局 -->
        <div class="bottom-panel">
            <el-row :gutter="40">
                <!-- 第一行 -->
                <el-col :span="5">
                    <div class="grid-item">
                        <img :src="ZxjlIcon" alt="Icon" class="header-icon" />
                        <div class="text-group">
                            <span>当前咨询</span>
                            <span><span>{{ zxsjkbObj.dataCount.dqzx }}</span></span>
                        </div>
                    </div>
                </el-col>
                <el-col :span="5">
                    <div class="grid-item">
                        <img :src="ZxjlIcon" alt="Icon" class="header-icon" />
                        <div class="text-group">
                            <span>有效咨询</span>
                            <span>{{ zxsjkbObj.dataCount.yxzx }}</span>
                        </div>
                    </div>
                </el-col>
                <el-col :span="5">
                    <div class="grid-item">
                        <img :src="ZxjlIcon" alt="Icon" class="header-icon" />
                        <div class="text-group">
                            <span>有效咨询(未成交)</span>
                            <span>{{ zxsjkbObj.dataCount.yxzxWcj }}</span>
                        </div>
                    </div>
                </el-col>
                <el-col :span="5">
                    <div class="grid-item">
                        <img :src="ZxjlIcon" alt="Icon" class="header-icon" />
                        <div class="text-group">
                            <span>有效咨询(已成交)</span>
                            <span>{{ zxsjkbObj.dataCount.yxzxYcj }}</span>
                        </div>
                    </div>
                </el-col>
                <el-col :span="4">
                    <div class="grid-item">
                        <img :src="ZxjlIcon" alt="Icon" class="header-icon" />
                        <div class="text-group">
                            <span>咨询有效率(%)</span>
                            <span>{{ zxsjkbObj.dataCount.zxyxl }}%</span>
                        </div>
                    </div>
                </el-col>
            </el-row>
            <br><br>
            <el-row>
                <div class="dateLatitudeBtnClass">
                    <el-radio-group v-model="zxsjkbObj.sjwd">
                        <el-radio-button label="周数据" @click="zxsjkbQuery('week')" />
                        <el-radio-button label="月数据" @click="zxsjkbQuery('month')" />
                        <el-radio-button label="季数据" @click="zxsjkbQuery('quarter')" />
                        <el-radio-button label="年数据" @click="zxsjkbQuery('year')" />
                        <el-radio-button label="自定义查询" @click="zxsjkbQuery('customize')" />
                    </el-radio-group>
                    <ElDatePicker style="margin-left: 10px;" v-if="zxsjkbObj.isShow" format="YYYY-MM-DD"
                        valueFormat="YYYY-MM-DD" type="daterange" :clearable="true" v-model="zxsjkbObj.dateRange"
                        @change="zxsjkbDateChange" />
                </div>
            </el-row>
            <el-row :gutter="40">
                <!-- 第一行 -->
                <el-col :span="5">
                    <div class="grid-item">
                        <img :src="ZxjlIcon" alt="Icon" class="header-icon" />
                        <div class="text-group">
                            <span>当前咨询</span>
                            <span>{{ zxsjkbObj.dataRangeCount.dqzx }}</span>
                        </div>
                    </div>
                </el-col>
                <el-col :span="5">
                    <div class="grid-item">
                        <img :src="ZxjlIcon" alt="Icon" class="header-icon" />
                        <div class="text-group">
                            <span>有效咨询</span>
                            <span>{{ zxsjkbObj.dataRangeCount.yxzx }}</span>
                        </div>
                    </div>
                </el-col>
                <el-col :span="5">
                    <div class="grid-item">
                        <img :src="ZxjlIcon" alt="Icon" class="header-icon" />
                        <div class="text-group">
                            <span>有效咨询(未成交)</span>
                            <span>{{ zxsjkbObj.dataRangeCount.yxzxWcj }}</span>
                        </div>
                    </div>
                </el-col>
                <el-col :span="5">
                    <div class="grid-item">
                        <img :src="ZxjlIcon" alt="Icon" class="header-icon" />
                        <div class="text-group">
                            <span>有效咨询(已成交)</span>
                            <span>{{ zxsjkbObj.dataRangeCount.yxzxYcj }}</span>
                        </div>
                    </div>
                </el-col>
                <el-col :span="4">
                    <div class="grid-item">
                        <img :src="ZxjlIcon" alt="Icon" class="header-icon" />
                        <div class="text-group">
                            <span>咨询有效率(%)</span>
                            <span>{{ zxsjkbObj.dataRangeCount.zxyxl }}%</span>
                        </div>
                    </div>
                </el-col>
            </el-row>

            <!-- 修改为线型图的区域 -->
            <el-row style="margin-top: 40px;">
                <el-col :span="24">
                    <div class="chart-container">
                        <div ref="chartRef" style="width: 100%; height: 400px;"></div>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script setup lang="ts">
import ZxjlIcon from '@/assets/images/咨询记录.png'
import { ref, onMounted } from 'vue'
import { getZxjlKbData, getZxjlZztData } from '../api'
import * as echarts from 'echarts'

let zzt_dqzx = []
let zzt_yxzx = []

// 咨询数据看板
let zxsjkbObj = ref({
    isShow: false,
    sjwd: '周数据',
    dateRange: [],

    // 无时间范围的汇总数据
    dataCount: {
        dqzx: '',
        yxzx: '',
        yxzxWcj: '',
        yxzxYcj: '',
        zxyxl: ''
    },

    // 有时间范围的汇总数据
    dataRangeCount: {
        dqzx: '',
        yxzx: '',
        yxzxWcj: '',
        yxzxYcj: '',
        zxyxl: ''
    },

    // 修改图表数据为线型图
    chartData: {
        xAxis: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
        series: [
            {
                name: '总咨询数',
                type: 'line',  // 改为线型图
                data: zzt_dqzx,
                smooth: true,  // 添加平滑效果
                symbol: 'circle',  // 数据点显示为圆形
                symbolSize: 8,  // 数据点大小
                lineStyle: {
                    width: 3  // 线宽
                }
            },
            {
                name: '有效咨询数',
                type: 'line',  // 改为线型图
                data: zzt_yxzx,
                smooth: true,  // 添加平滑效果
                symbol: 'circle',  // 数据点显示为圆形
                symbolSize: 8,  // 数据点大小
                lineStyle: {
                    width: 3  // 线宽
                }
            }
        ]
    }
})

const chartRef = ref(null)

// 初始化图表
const initChart = () => {
    if (!chartRef.value) return

    const myChart = echarts.init(chartRef.value)

    const option = {
        title: {
            text: '咨询数据趋势',
            left: 'center'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross'  // 改为十字准星指示器
            }
        },
        legend: {
            data: ['总咨询数', '有效咨询数'],
            bottom: 10
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '15%',
            top: '15%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: zxsjkbObj.value.chartData.xAxis,
            axisLine: {
                lineStyle: {
                    color: '#999'
                }
            },
            axisLabel: {
                color: '#666'
            }
        },
        yAxis: {
            type: 'value',
            name: '数量',
            axisLine: {
                lineStyle: {
                    color: '#999'
                }
            },
            axisLabel: {
                color: '#666'
            },
            splitLine: {
                lineStyle: {
                    type: 'dashed'
                }
            }
        },
        series: zxsjkbObj.value.chartData.series,
        color: ['#5470C6', '#91CC75']  // 自定义线条颜色
    }

    myChart.setOption(option)

    // 响应式调整
    window.addEventListener('resize', function () {
        myChart.resize()
    })
}

// 点击时间按钮查询
const zxsjkbQuery = async (dataRange) => {
    if (dataRange) {
        if (dataRange === 'customize') {
            zxsjkbObj.value.isShow = true;
        } else {
            zxsjkbObj.value.isShow = false;
            zxsjkbObj.value.dateRange = []
            getZxjlKbDataFunc(dataRange, null, null);
        }
    } else {
        getZxjlKbDataFunc(null, null, null);
    }
}

// 自定义时间查询
const zxsjkbDateChange = async () => {
    const startDate = zxsjkbObj.value.dateRange[0];
    const endDate = zxsjkbObj.value.dateRange[1];
    getZxjlKbDataFunc("customize", startDate, endDate);
}

// 调用接口方法
const getZxjlKbDataFunc = async (dataRange, startDate, endDate) => {
    if (dataRange) {
        let res;
        if (dataRange === 'customize') {
            res = await getZxjlKbData({ "dataRange": dataRange, "startDate": startDate, "endDate": endDate });
        } else {
            res = await getZxjlKbData({ "dataRange": dataRange });
        }
        res.forEach(item => {
            const dataType = item.dataType;
            if (zxsjkbObj.value.dataRangeCount.hasOwnProperty(dataType)) {
                zxsjkbObj.value.dataRangeCount[dataType] = item.zhi;
            }
        });
    } else {
        let res = await getZxjlKbData({ "dataRange": null });
        res.forEach(item => {
            const dataType = item.dataType;
            if (zxsjkbObj.value.dataCount.hasOwnProperty(dataType)) {
                zxsjkbObj.value.dataCount[dataType] = item.zhi;
            }
        });
    }
}

// 咨询数据趋势线型图
const getZxjlZztDataFunc = async () => {
    let res = await getZxjlZztData();
    res.forEach(item => {
        zzt_dqzx.push(item.zxkhCount)
        zzt_yxzx.push(item.yxkhCount)
    });
    initChart();
}

onMounted(() => {
    zxsjkbQuery(null);
    zxsjkbQuery('week');
    getZxjlZztDataFunc();
})

</script>

<style scoped>
.dashboard-container {
    width: 100%;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.top-panel {
    padding: 0px;
    border-bottom: 1px solid #ddd;
    /* 添加一条浅灰色横线 */
}

.bottom-panel {
    padding: 10px;
}

.bottom-panel .el-row {
    margin-bottom: 20px;
}

.grid-item {
    display: flex;
    align-items: center;
    justify-content: left;
    border-radius: 8px;
    height: 100%;
}

.header-icon {
    width: 40px;
    height: 40px;
    margin-right: 15px;
}

.text-group {
    display: flex;
    flex-direction: column;
}

.text-group span:first-child {
    font-size: 12px;
    color: #666;
}

.text-group span:last-child {
    font-size: 20px;
    color: #0a67f3;
    margin-top: 5px;
}

.right-section {
    display: flex;
    align-items: center;
    /* 纵向居中 */
}

/* 添加 .gray-background 类 */
.gray-background {
    background-color: #e0e0e0;
    /* 灰色背景 */
    padding: 5px 10px;
    /* 可选：添加一些内边距以增强视觉效果 */
    border-radius: 4px;
    /* 可选：添加圆角 */
}

.dateLatitudeBtnClass {
    display: flex;
    justify-content: center;
    /* 水平居中 */
    align-items: center;
    /* 垂直居中（如果需要） */
}
</style>